<template>
   <div>
       <!-- 分类详情页面 -->


       <!-- 顶部返回栏 -->
       <bufantop></bufantop>
    
        <van-tabs v-model="currentNav.id" @click="onchange">
            <van-tab v-for="item in list" :key="item.id" :title="item.name" :name='item.id'>

            </van-tab>
        </van-tabs>
                <div class="goods">
                    <p class="name">{{currentNav.name}}</p>
                    <p class="price">{{currentNav.front_desc}}</p>

                </div>
                <van-grid :border="false" :column-num="2">
                    <van-grid-item class="goodsitem" v-for="item in goodsLists" :key="item.id" :name="item.id">
                        <img :src="item.list_pic_url" alt="">
                        <p>{{item.name}}</p>
                        <p>{{item.retail_price}}</p>
                    </van-grid-item>

                </van-grid>

                

                
            


    </div> 
</template>

<script>
import {categoryNav,goodsList} from "@/api/category"
import bufantop from "@/components/bufantop.vue"
export default {
    data(){
        return{
            // 接收来自分类页面的id
            value:"",
            // 接收传来的导航数据
            list:[],
            // 接收传来的商品列表数据
            goodsLists:[],
            currentNav:'',
            active:""
        }
    },
    components:{
        bufantop
    },
    created(){
      
       
        this.value=this.$route.query.val
        this.getData();
    },
    // beforeRouteLeave(next){
    //   this.$store.commit('addshopid',this.currentNav)
    //     next()
    // },
    methods:{
        
        getData(){
            // console.log(1);
              console.log(this.$store.state.shopId);
            categoryNav({
                id:this.value,
            }).then(res=>{
                console.log(res);
                this.list=res.navData
                this.currentNav=res.currentNav
            })
            goodsList({
                categoryId:this.value,
                }).then(res=>{
                console.log(res);
                this.goodsLists=res.data
                })
        },
        onchange(name){
            this.value=name
            this.getData()
        }
    }
}
</script>

<style lang="scss" scoped>

    .goodsitem img{
        width: 151px;
        height: 151px;
    }



    .goods{
        padding: 15px;
    }
    .name{
        font-size: 15px;
        margin: 15px 0 9px;
    }
    .price{
        font-size: 12px;
        color: #999;
        margin: 12px 0;
    }
</style>